<template>
	<view class="container">
		<view class="example">
			<view class="content">
				<!--电影列表-->
				<uni-list v-for="(film, index) in filmList" :key="index">
					<uni-list-item :title="film.filmName" :note="film.filmType" showArrow :thumb="film.posterUrl"
						thumb-size="lg" @click="handleFilmClick(film)" :clickable="true">
						<template v-slot:footer>
							<div class="footer-content">
								<text class="chat-custom-text">{{film.releaseDate}}</text>
								<uni-fav v-if="film.isPremiere === '1'" class="favBtn" :circle="true"
									:content-text="contentText" bg-color="#dd524d" fg-color="#ffffff" />
							</div>
						</template>
					</uni-list-item>
				</uni-list>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getFilmInfoList
	} from "@/api/star/film/film.js"

	export default {
		components: {},
		data() {
			return {
				filmList: [],
				// 列表请求参数
				filmInfo: {
					currentPage: 1, // 当前页码
					size: 20, // 页面数量
				},
				// 首映礼显示按钮
				contentText: {
					contentDefault: '首映礼',
					contentFav: ''
				},
			}
		},
		computed: {

		},
		onLoad() {
			this.getFilms(this.filmInfo);
		},
		onShow() {
			// 返回页面时重新获取影讯列表
			if (this.isNavigatedBack) {
				this.getFilms(this.filmInfo);
				this.isNavigatedBack = false; // 重置标志, 使onShow仅在页面返回时加载
			}
		},
		methods: {
			// 获取电影列表
			getFilms(filmInfo) {
				getFilmInfoList(filmInfo).then(response => {
					if (response.code === 200) {
						this.filmList = response.rows;
					} else {
						this.$modal.msgError(response.msg);
					}
				})
			},
			// 查看首映礼详情
			handleFilmClick(film) {
				if (film.isPremiere === '1') {
					let filmId = film.filmId;
					this.$tab.navigateTo('/pages/star/premiere/index?filmId=' + filmId);
					this.isNavigatedBack = true; // 设置标志
				} else {
					this.$modal.msgError("该影片暂无首映");
				}
			},
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	::v-deep .uni-list--lg {
		height: 120px !important;
		width: 90px !important;
	}

	/*列表右插槽样式*/
	.footer-content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 如果你希望在垂直方向上，也可以居中对齐 */
	}

	.favBtn {
		margin: 0 20rpx 20rpx 0;
	}

	.chat-custom-text {
		font-size: 12px;
		color: #999;
		margin-bottom: 20rpx;
	}
</style>